<template>
	<view>
		<!-- v-if="searchData" -->
		<!-- 头部 -->
		<view class="menu_hd">
			<view class="hd_list">
				<uni-icons type="left" size="26" @tap="getPrev"></uni-icons>
				<input class="input_txt" type="text" v-model="val" />
				<navigator url="../searchDetail/searchDetail" class="sousuo">
					搜索
				</navigator>
			</view>
			<view class="hd_nav">
				<block v-for="item,index in detailData" :key="index">
					<view class="nav_item" @tap="seClick(item.path,index)"
						:class="searchIndex == index?'nav_item_active active_af':''">
						{{item.title}}
					</view>
				</block>
			</view>

		</view>
		<!-- 动态组件 -->
		<component :is="searchName" v-on:child-data="myRev" :seData="searchData" v-if="searchData&&searchState">
		</component>
		<!-- <searchMenu></searchMenu> -->
		<!-- <view class="content_bd">
			<searchMenuContent :content="contentData" v-if="contentData&&searchState"></searchMenuContent>
		</view> -->
	</view>
</template>

<script>
	import {
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	import searchMenu from '../../../components/searchMenu/searchMenu.vue';
	import searchNote from '../../../components/searchNote/searchNote.vue';
	import searchUser from '../../../components/searchUser/searchUser.vue';
	// import searchMenuContent from '../../../components/searchMenuContent/searchMenuContent.vue'
	export default {
		data() {
			return {
				detailData: [{
					"title": "菜谱",
					"path": "searchMenu",
				}, {
					"title": "笔记",
					"path": "searchNote",
				}, {
					"title": "用户",
					"path": "searchUser",
				}, ],
				searchName: 'searchMenu',
				val: null,
				searchIndex: 0,
				searchData: null,
				searchState: false,
				keyword: '',
				offset: 0,
				offsetState: false,
				msgChild: {
					"type": 0, //文章，视频  0,1
					"order": 0, //0,1,2
					"sk": '', //二级关键字
				}, //子传父，数据
			};
		},
		components: {
			searchMenu,
			searchNote,
			searchUser
		},
		onLoad(option) {
			this.keyword = option.value;
			// this.getData(option.value)
			// console.log(option.value)
			this.getData()
		},
		onReachBottom() {
			++ this.offset;
			this.getData()

		},
		watch: {


		},
		created() {
			// console.log( this.getHisList())
			this.val = this.getHisList()[0]
		},
		methods: {
			...mapActions(["setSeaList"]),
			...mapGetters(["getHisList", "getSeaList"]),
			...mapMutations(["saveSeaList", "saveSeaLoad"]),
			getPrev() {
				this.$router.go(-1)
			},
			seClick(k, j) {
				this.searchIndex = j;
				this.searchName = k;
			},
			myRev(msg) {
				this.msgChild = msg;
				// console.log("子传父的值-----===>", this.msgChild);
				this.offset = 0;
				// 清除
				this.saveSeaList([])
				this.getData()
			},
			getData() {
				this.saveSeaLoad(true)
				this.$axios({
					methods: 'get',
					url: 'recipe/search',
					params: {
						keyword: this.keyword,
						type: this.msgChild.type,
						order: this.msgChild.order,
						offset: this.offset,
						limit: 20,
						secondary_keyword: this.msgChild.sk
					}
				}).then(res => {
					this.$nextTick(() => {
						this.searchData = res.result;
						this.searchState = true;
						this.saveSeaLoad(false); //loading
						console.log(res.result,this.offset)
						// if(this.offsetState){
						// 	// 取值，拼接 
						// 	// console.log('---取值，拼接 ---',this.getSeaList());
						// let tempArr = this.getSeaList().concat(res.result.list);
						// 	console.log('---取值，拼接 触底---',tempArr);
						// 	this.offsetState = false;
						// this.saveSeaList(tempArr);
						// 	// 没折了
						// 	// this.$store.dispatch('setSeaList',tempArr)
						// }else{
						// 	console.log('---不不不触底---');
						// 	// 存值  vuex
						// this.saveSeaList(res.result.list);
						// 	// this.$store.dispatch('setSeaList',res.result.list)
						// }
						// 异步处理数据
						this.setSeaList(res.result.list)
						// console.log('活动数据---->', res.result.list);
					})
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	.menu_hd {
		width: 100%;
		// border-bottom: 1rpx solid rgba(0, 0, 0, .2);
		position: fixed;
		background-color: #FFFFFF;
		z-index: 99;

		.hd_list {
			width: 94%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;

			.input_txt {
				display: inline-block;
				width: 78%;
				font-size: 28rpx;
				background-color: #F5F5F5;
				padding: 16rpx 0;
				border-radius: 16rpx;
				text-indent: 40rpx;
				// font-weight: bold;
			}

			.sousuo {
				font-size: 28rpx;
			}
		}

	}

	.hd_nav {
		width: 100%;
		height: 78rpx;
		display: flex;
		// margin: 10rpx 0;
		justify-content: space-around;
		border-bottom: 1rpx solid rgb(235, 235, 235);
		align-items: center;

		.nav_item {
			// padding: 18rpx 20rpx;
			position: relative;
		}

		.active_af::after {
			content: '';
			display: block;
			width: 80%;
			height: 8rpx;
			border-radius: 20rpx;
			background-color: #FFC830;
			position: absolute;
			bottom: -40%;
			left: 50%;
			transform: translate(-50%, 50%);

		}

		.nav_item_active {
			color: #000;
			font-weight: 400;
			animation: masked .3s linear;
		}
	}

	// css 动画

	@keyframes masked {
		0% {
			transform: translate(0px, 0px);
		}

		25% {
			transform: translate(5rpx, 0px);
		}

		75% {
			transform: translate(-10rpx, 0px);
		}

		100% {
			transform: translate(0px, 0px);
		}
	}
</style>
